import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import Item from '../Item'
import './index.css'
export default class List extends Component {
    state = {
        userDatas: [],
        isFirst: true,//是否第一次打开界面
        isLoading: false,//标示是否处于加载中
        err:''
    }
    componentDidMount(){
        this.token = PubSub.subscribe('userInformation', (msg,data)=>{
            this.setState(data)
        })
    }
    componentWillUnmount(){
        PubSub.unsubscribe(this.token)
    }
    render() {
        const {data:userDatas,isFirst,isLoading,err} = this.state
        return (
            <div className="row">
                {
                    isFirst ? <h2>欢迎使用，输入搜索</h2> : 
                    isLoading ? <h2>Loading...</h2> :
                    err ? <h2 style={{color: 'red'}}>{err}</h2> :
                    userDatas.length ===  0 ? <h2>没有该用户名</h2> :
                   userDatas.map(userData => <Item key={userData.id} {...userData}/>)
                }
            </div>
        )
    }
}
